<template>
  <div class="allpage">
    <el-form
      :inline="true"
      :model="formInline"
      ref="formInline"
      class="form-style"
    >
      <el-form-item prop="name" style="margin: 15px 0 15px 30px">
        <el-input v-model="formInline.name" placeholder="团长姓名"></el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber" style="margin: 15px 0 15px 30px">
        <el-input
          v-model="formInline.phoneNumber"
          placeholder="手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="time" style="margin: 15px 0 15px 30px">
        <el-date-picker
          @change="getSTimes"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-model="formInline.time"
          type="date"
          placeholder="选择申请日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin: 15px 0 15px 30px">
        <el-button
          icon="el-icon-refresh"
          type="warning"
          @click="clean('formInline')"
          >重置</el-button
        >
        <el-button icon="el-icon-search" type="primary" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="table-style">
      <el-form style="margin: 0 0 5px 15px" :inline="true" :model="form">
        <el-form-item label="团长总数：" style="font-weight: bold">{{
          totalGroup
        }}</el-form-item>
      </el-form>
      <el-table border :data="tableData">
        <el-table-column prop="SId" label="编号"></el-table-column>
        <el-table-column prop="SalesManName" label="姓名"></el-table-column>
        <el-table-column
          prop="SalesManPhone"
          label="手机号码"
        ></el-table-column>
        <el-table-column prop label="下级数" width="140">
          <template slot-scope="scope">
            <div class="style-hover" @click="laxinDetail">
              一级团长：{{ scope.row.Levels1Count }}
            </div>
            <div class="style-hover" @click="laxinDetail">
              二级团长：{{ scope.row.Levels2Count }}
            </div>
            <!-- @mouseover="mouseOver"	@mouseleave="mouseLeave" :style="active"  -->
          </template>
        </el-table-column>
        <el-table-column label="分销员数">
          <template slot-scope="scope">
            <div class="style-hover" @click="fenxiaoDetail">
              {{ scope.row.UserDistributionCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="OrderProfit" label="累计获得提成">
          <!-- <template slot-scope="scope">
            <div v-if="scope.row.tui">{{scope.row.tui}}</div>
            <div v-else>--</div>
          </template>-->
        </el-table-column>
        <el-table-column prop="SalesManState" label="状态">
          <template slot-scope="scope">
            <p v-show="scope.row.SalesManState === '0'" style="color: green">
              正常
            </p>
            <p v-show="scope.row.SalesManState === '-1'" style="color: red">
              冻结
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="CreateGBCount7Day" label="近7日发布活动数">
          <!-- <template slot-scope="scope">
            <p v-show="scope.row.State==='on'">{{scope.row.band}}</p>
            <p v-show="scope.row.State==='off'">--</p>
          </template>-->
        </el-table-column>
        <el-table-column prop="UsersShareCount7Day" label="近7日推广次数">
          <!-- <template slot-scope="scope">
            <p v-show="scope.row.State==='on'">{{scope.row.people}}</p>
            <p v-show="scope.row.State==='off'">--</p>
          </template>-->
        </el-table-column>
        <el-table-column prop="OrderCount7Day" label="近7日销售订单数">
          <!-- <template slot-scope="scope">
            <p v-show="scope.row.State==='on'">{{scope.row.bandno}}</p>
            <p v-show="scope.row.State==='off'">--</p>
          </template>-->
        </el-table-column>
        <el-table-column
          prop="CreateTime"
          label="申请时间"
          width="155"
        ></el-table-column>
        <el-table-column prop="action" label="操作" width="240">
          <template slot-scope="scope">
            <div v-show="scope.row.SalesManState === '0'">
              <el-row>
                <el-col :span="10">
                  <el-button
                    type="danger"
                    size="mini"
                    style="margin: 0 0 5px 10px"
                    @click="bandSale(scope.row.SId, scope.row.SalesManState)"
                    >冻结</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goDetailpage(scope.row.SId)"
                    >详情</el-button
                  >
                </el-col>
                <el-col :span="10">
                  <el-button
                    type="warning"
                    size="mini"
                    @click="setIsInvite(scope.row)"
                    style="margin: 0 0 5px 10px"
                    >调整上级</el-button
                  >
                  <el-button
                    type="info"
                    size="mini"
                    @click="del(scope.row.UserId)"
                    >取消上级</el-button
                  >
                </el-col>
              </el-row>
            </div>

            <div v-show="scope.row.SalesManState === '-1'">
              <el-row>
                <el-col :span="10">
                  <el-button
                    type="success"
                    size="mini"
                    @click="bandSale(scope.row.SId, scope.row.SalesManState)"
                    style="margin: 0 0 5px 10px"
                    >解冻</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goDetailpage(scope.row.SId)"
                    >详情</el-button
                  >
                </el-col>
                <el-col :span="10">
                  <el-button
                    type="warning"
                    size="mini"
                    @click="setIsInvite(scope.row)"
                    style="margin: 0 0 5px 10px"
                    >调整上级</el-button
                  >
                  <el-button
                    type="info"
                    size="mini"
                    @click="del(scope.row.UserId)"
                    >取消上级</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>
    <groupteam-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      :UserId="userid"
      :UserName="username"
    />
    <!-- :classifyId="accuseitem"     :UserName="username"    -->
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import GroupteamDialog from "./children/GroupteamDialog";
import {
  LoadSalesMan,
  BanSalesMan,
  DeleteSalesManIsInvite,
} from "@/request/api";
export default {
  created() {
    this.getTableDatas();
  },
  methods: {
    close(reload) {
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableDatas();
      }
    },
    //取消上级
    del(row) {
      this.$confirm("请问是否为该团长继续进行此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then( () => {
        DeleteSalesManIsInvite({
        UserId: row,
        })
        .then( res => {
          if (res.StatusCode === 200) {
                this.$confirm("该团长操作成功!","操作成功",{})
            this.getTableDatas();
              }
        })
        .catch( err => { console.log(err) })
      })
    },
    //调整上级
    setIsInvite(row) {
      console.log(row);
      // console.log(row.UserId)
      this.rowColumn = row; //每一行的数据
      this.dialogFormVisible = true;
      this.dialogTitle = "调整上级";
      this.username = this.rowColumn.SalesManName;
      console.log(this.username);
      this.userid = this.rowColumn.UserId;
      console.log(this.userid);
    },
    //获取table数据
    getTableDatas() {
      LoadSalesMan({
        SreachValues: this.formInline.name || this.formInline.phoneNumber,
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        CustomerId: 1,
      })
        .then((res) => {
          if (res.StatusCode === 200) {
            this.tableData = res.Data;
            this.currentPage = res.PageIndexs;
            this.PageSize = res.PageCount;
            this.total = res.DataCounts;
            this.totalGroup = res.DataCounts;
            var that = this;
            for (let i in this.tableData) {
              that.tableData[i].CreateTime = this.tableData[
                i
              ].CreateTime.replace(/(\/)/g, "-");
            }
          }
          // console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 冻结/解冻
    bandSale(id, num) {
      this.$confirm("请问是否为该团长继续进行此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          BanSalesMan({
            SId: id,
            SalesManState: num,
          })
            .then((res) => {
              if (res.StatusCode === 200) {
                this.$confirm("该团长操作成功!","操作成功",{})
            this.getTableDatas();
              }
            })
            .catch((err) => { console.log(err) });
        },
      );
    },
    //跳转拉新详情页
    laxinDetail() {
      console.log("ssss");
      this.$router.push("/Groupteamlaxin");
    },
    //跳转分销详情页
    fenxiaoDetail() {
      this.$router.push("/Groupteamfenxiao");
    },
    //detail页面
    async goDetailpage(row) {
      console.log(row);
      this.$router.push({
        path: "/groupteamdetail",
        query: { detail: row },
      });
    },
    // 分页 + 清空 + 搜索
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableDatas();
    },
    search(row) {
      this.getTableDatas();
    },
    getSTimes(val) {
      this.ruleForm.endTime = val;
    },
  },
  components: {
    Botpage,
    GroupteamDialog,
  },
  data() {
    return {
      username: "",
      userid: "",
      rowColumn: {},
      accuseitem: [],
      dialogTitle: "",
      dialogFormVisible: false,
      active: "",
      currentPage: 1,
      PageSize: 10,
      total: 1,
      tableData: [],
      form: {},
      formInline: {
        time: "",
        phoneNumber: "",
        name: "",
      },
      options: [],
      totalGroup: null,
    };
  },
};
</script>

<style lang="less" scoped>
.style-hover:hover {
  cursor: pointer;
  color: #409eff;
}
</style>